<script setup lang='ts'>
defineOptions({ name: 'AppSportsAllSportsList' })

const { headerHeight } = storeToRefs(useWindowStore())
const { allSportsCount, isShowAllSportsList } = storeToRefs(useSportsStore())
const route = useRoute()

const currentNav = ref('1')
const navList = [
  // 所有项目
  { label: $t('sports_balls'), value: '1' },
  // 虚拟体育
  { label: $t('sports_v_balls'), value: '2' },
]

const sportsList = computed(() => {
  if (allSportsCount.value && allSportsCount.value.list && allSportsCount.value.list.length > 0) {
    return allSportsCount.value.list.map((item) => {
      return {
        ...item,
        count: item.c,
        label: item.sn,
        value: item.si,
        icon: item.spic
      }
    })
  }
  return []
})
const vSportsList = computed(() => {
  if (allSportsCount.value && allSportsCount.value.list && allSportsCount.value.list.length > 0) {
    return allSportsCount.value.list.filter((a) => a.vsc > 0).map((item) => {
      return {
        ...item,
        count: item.c,
        label: item.sn,
        value: item.si,
        icon: item.spic
      }
    })
  }
  return []
})
const list = computed(() => {
  if (currentNav.value === '1')
    return sportsList.value
  else if (currentNav.value === '2')
    return vSportsList.value
  return []
})
// 当前页面球种id
const si = computed(() => route.query.si?.toString() ?? '0')

function changeNav(v: string) {
  currentNav.value = v
}
function closeSelf() {
  isShowAllSportsList.value = false
}
function itemClick(item: any) {
  if (si.value !== item.value) {
    i18nNavigateTo(`/sports?bt-path=${encodeURIComponent('/sport')}&si=${item.value}`)
  }
  closeSelf()
}
</script>

<template>
  <div class="app-all-sports-list" @click.self="closeSelf">
    <div class="layer1" @click.self="closeSelf" :style="{ top: headerHeight + 64 + 'px' }">
      <div class="w-full py-[16px] bg-[var(--color-bg-black-3)] rounded-[8px] relative">
        <div class="px-[10px]">
          <div class=" h-[32px] w-full flex overflow-hidden rounded-[4px] bg-[var(--color-bg-black-4)] mb-[8px]">
            <div v-for="item in navList" :class="{ active: currentNav === item.value }" @click="changeNav(item.value)"
              :key="item.value" class="nav-item">
              <span>{{ item.label }}</span>
            </div>
          </div>
        </div>

        <div class="list">
          <div v-if="list.length > 0" class="grid grid-cols-1 gap-[8px]">
            <div v-for="item in list" :key="item.value" class="item" @click="itemClick(item)">
              <div class="flex items-center">
                <div class="w-[24px] h-[24px] p-[3px] flex items-center justify-center">
                  <BaseImage :url="item.icon" is-network :class="{ 'active-sport': item.value === +si }" />
                </div>
                <span class="mx-[4px] ">{{ item.label }}</span>
                <div class="count">
                  {{ item.count }}
                </div>
              </div>
              <BaseIcon name="uni-arrow-down" class="rotate-[-90deg]" />
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<style lang='scss' scoped>
.app-all-sports-list {
  position: absolute;
  z-index: 101;
  top: 64px;
  left: 0;
  bottom: 0;
  width: 100%;
  background: var(--color-black-500);
  overflow-y: unset;
}

.layer1 {
  width: calc(100% - 28px);
  margin: 0 14px;
  z-index: 99;
  overflow: auto;
  position: sticky;
  min-height: calc(100vh - 300px);
  padding-top: 16px;
  border-radius: 12px;
  padding-bottom: 50px;
}

.nav-item {
  flex-grow: 1;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white-500);
  font-size: 12px;
  font-weight: 590;
  line-height: 14px;
  border-radius: 4px;
  cursor: pointer;

  &.active {
    background-color: var(--color-bg-black-6);
    color: var(--color-text-white-0);
  }
}

.list {
  width: 100%;
  height: 100%;
  max-height: calc(100vh - 300px);
  box-sizing: border-box;
  overflow-y: auto;
  padding-left: 10px;
  padding-right: 10px;

  &::-webkit-scrollbar {
    width: 12px;
  }

  &::-webkit-scrollbar-thumb {
    border-width: 4px;
    border-style: solid;
    border-color: transparent;
    border-image: initial;
    background: content-box rgba(255, 255, 255, 0.15);
    border-radius: 8px;
  }

  .item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 40px;
    color: var(--color-text-white-0);
    font-size: 14px;
    font-weight: 590;
    line-height: 16px;
    cursor: pointer;

    .count {
      display: flex;
      padding: 0 7px;
      height: 20.5px;
      justify-content: center;
      align-items: center;
      border-radius: 16px;
      background: var(--color-bg-black-4);
      color: var(--color-white-500);
      font-size: 12px;
      font-weight: 590;
      line-height: 16px;
      letter-spacing: 0.36px;
    }
  }
}

.active-sport {
  &::after {
    content: "";
    position: absolute;
    inset: 0;
    background-color: rgba(36, 238, 137, 0.5);
    /* 加的颜色层 */
    pointer-events: none;
    border-radius: 50%;
  }
}
</style>
